<template>
  <div class="main">
    <div class="content">
      <div class="top">
        <div class="box" id="dingdan">
          <div class="left">订单号</div>
          <input type="number" v-model="shopId" readonly class="text_input">
        </div>
        <div class="box" id="nengfou">
          <div class="left">能否再次出售</div>
          <input type="checkbox" v-model="canResell" class="text_input">
        </div>
        <div class="box" id="tiaoxing">
          <div class="left">条形码</div>
          <input type="text" readonly v-model="barCode" class="text_input">
        </div>
        <div class="box" id="changenumber">
          <div class="left">换货数量</div>
          <input type="number" v-model="count" class="text_input">
        </div>
        <div class="box" id="changereason">
          <div class="left">换货原因</div>
          <input type="text" v-model="reason" class="text_input">
        </div>
      </div>
      <div class="bottom">
        <div class="button" @click="confirm" id="confirm">确认换货</div>
      </div>
    </div>
  </div>
</template>

<script>
import salesPersonService from "../../service/aftersales";

export default {
  name: 'ChangeGoods',
  data () {
    return {
      shopId: null,
      barCode: null,
      canResell: null,
      count: null,
      reason: null
    }
  },
  mounted() {
    this.shopId = this.$route.params.shopId
    this.barCode = this.$route.params.barCode
  },
  methods: {

    async confirm() {
      if (this.shopId==null||this.barCode==null) {
        alert("刷新页面失去数据")
        this.$router.push({name:'BeforeSales'})
        return
      }
      if (this.count==null||this.reason==null) {
        alert("请填写完整")
        return
      }
      const loginedUser = this.$store.getters.getLoginUser
      if (loginedUser == null) {
        return
      }
      const data = {
        serviceId: loginedUser.storeId,
        shopId: this.shopId,
        canResell: this.canResell,
        barCode: this.barCode,
        count: this.count,
        reason: this.reason
      }
      let result = await salesPersonService.exchangeGoods(data)
      if (result.data.code == 2000) {
        alert(result.data.data)
        this.$router.push({name: 'BeforeSales'})
      }else{
        let next = confirm("当前无货， 是否提交延迟交付申请")
        if (next) {
          this.$router.push({name: 'ApplyForADelayInDelivery', params: {
              goodsVo: data
            }})
        } else {
          this.$router.push({name: 'BeforeSales' })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  .main {
    width: 100%;
    height: calc(100% - 1px);
    background: #FFFFFF;
    border-top: 1px solid transparent;
    .content {
      width: 406px;
      left: 128px;
      margin: 0 auto;
      .top {
        width: 100%;
        .box {
          width: 100%;
          height: 25px;
          margin-top: 10px;
          .left {
            height: 25px;
            line-height: 25px;
            width: 106px;
            float: left;
            text-align: left;
            font-size: 14px;
          }
          .text_input {
            border-width: 1px;
            width: 298px;
            height: 23px;
          }
          .notselect {
            cursor: default;
          }
        }
      }
      .bottom {
        width: 100%;
        .button {
          margin: 20px auto;
          width: 284px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 13px;
          border-radius: 10px;
          border: 1px solid black;
        }
        .button:hover {
          background: #c1e8ff;
          cursor: pointer;
        }
      }
    }
  }
</style>
